# 云胡的编程周报第 002 期

时间：2023/8/21 - 2023/8/27

# 一、点滴记录

上传的图片存储在阿里云或腾讯云的 OSS（对象存储中），数据库存放图片的地址，如果是多张图片，那么用逗号隔开，所以这个字段用 varchar 类型，并且空间开得大一些。
前端分页查询数据时，后端查不到数据不要返回 null，而是返回一个空数组[]。
修改完 nginx.conf 一定要记得重启 nginx 使新的配置生效，命令是 service nginx restart。
部署 vue 项目到服务器切记要把 vue.config.js 中的代理地址改为服务器地址上的，然后再打包发布。
axios 发送带参数的请求有两种方式，分别是 params 和 data，params 会把参数放到 url 路径中，data 会把参数放在请求体之中，后端可以用一个 DTO 对象来接收。
Service 和 DAO 层的方法命名:

获取单个对象用 get作为前缀

获取多个对象用 list 作为前缀，复数结尾，如 listObjects。
IDEA 和 WebStorm 的格式化代码快捷键都是 Ctrl + Alt + L

Vue3的 reactive 如果是数组，直接赋值会失去响应性。

解法 1：需要创建一个对象，这个对象包含一个数组，这时候可以直接对这个对象直接赋值，不会失去响应性。

解法 2：使用 es6 的 arr.push(...res)。

// 错误写法：
const arr = reactive([]);

const getList = () => {
    const res = [2, 3, 4, 5]; // 假设请求接口返回的数据
    arr = res; // 错误做法，会失去响应性
}

// 正确写法 1：
const arr = reactive({
    data: []
});

const getList = () => {
    const res = [2, 3, 4, 5]; // 假设请求接口返回的数据
    arr.data = res; 
}

// 正确写法 2:
const arr = reactive([]);

const getList = () => {
    const res = [2, 3, 4, 5]; // 假设请求接口返回的数据
    arr.push(...res); // es6 特性，... 是一个扩展运算符，将数组转为逗号分隔的参数
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

不能替换整个对象：由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象，因为这样的话与第一个引用的响应性连接将丢失。

使用 el-upload 上传文件时，默认 action 上传会有一些跨域的问题，于是使用 :http-request="uploadFile" 来自定义上传的方法。在 uploadFile 方法中获取文件，然后生成一个 FormData 对象，再设置一下 headers:

function uploadFile(option) {
    let formData = new FormData();
    formData.append('file', option.file)
    axios({
        method: "POST",
        url: "url",
        data: formData,
        headers: {
        'Content-Type': 'multipart/form-data'
        }
    })
}

1
2
3
4
5
6
7
8
9
10
11
12

用 Element Plus 渲染动态级联选择器时，从后端获取的数据：

[
{
    "id": 1,
    "name": "literature",
    "chineseName": "文学",
    "parentMenuId": 0,
    "menuStatus": true,
    "childMenu": [
    {
        "id": 2,
        "name": "noval",
        "chineseName": "小说",
        "parentMenuId": 1,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 3,
        "name": "essay",
        "chineseName": "随笔",
        "parentMenuId": 1,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 4,
        "name": "youth_literature",
        "chineseName": "青春文学",
        "parentMenuId": 1,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 5,
        "name": "biography",
        "chineseName": "传记",
        "parentMenuId": 1,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 6,
        "name": "classics",
        "chineseName": "古典文学",
        "parentMenuId": 1,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 7,
        "name": "suspenseful_reasoning",
        "chineseName": "悬疑推理",
        "parentMenuId": 1,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 8,
        "name": "science_fiction",
        "chineseName": "科幻",
        "parentMenuId": 1,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 9,
        "name": "martial_arts",
        "chineseName": "武侠",
        "parentMenuId": 1,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 10,
        "name": "famous",
        "chineseName": "名著",
        "parentMenuId": 1,
        "menuStatus": true,
        "childMenu": null
    }
    ]
},
{
    "id": 11,
    "name": "humanity_social_science",
    "chineseName": "人文社科",
    "parentMenuId": 0,
    "menuStatus": true,
    "childMenu": [
    {
        "id": 12,
        "name": "history",
        "chineseName": "历史",
        "parentMenuId": 11,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 13,
        "name": "psychology",
        "chineseName": "心理学",
        "parentMenuId": 11,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 14,
        "name": "politics",
        "chineseName": "政治",
        "parentMenuId": 11,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 15,
        "name": "culture",
        "chineseName": "文化",
        "parentMenuId": 11,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 16,
        "name": "philosophy_religion",
        "chineseName": "哲学宗教",
        "parentMenuId": 11,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 17,
        "name": "social_science",
        "chineseName": "社会学",
        "parentMenuId": 11,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 18,
        "name": "raw",
        "chineseName": "法律",
        "parentMenuId": 11,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 19,
        "name": "humanities",
        "chineseName": "人文",
        "parentMenuId": 11,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 20,
        "name": "sinology",
        "chineseName": "国学",
        "parentMenuId": 11,
        "menuStatus": true,
        "childMenu": null
    }
    ]
},
{
    "id": 21,
    "name": "economic_management_inspirational",
    "chineseName": "经管励志",
    "parentMenuId": 0,
    "menuStatus": true,
    "childMenu": [
    {
        "id": 22,
        "name": "manage",
        "chineseName": "管理",
        "parentMenuId": 21,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 23,
        "name": "finance",
        "chineseName": "金融",
        "parentMenuId": 21,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 24,
        "name": "economy",
        "chineseName": "经济",
        "parentMenuId": 21,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 25,
        "name": "market",
        "chineseName": "营销",
        "parentMenuId": 21,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 26,
        "name": "invest",
        "chineseName": "投资",
        "parentMenuId": 21,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 27,
        "name": "business",
        "chineseName": "商业",
        "parentMenuId": 21,
        "menuStatus": true,
        "childMenu": null
    }
    ]
},
{
    "id": 28,
    "name": "art",
    "chineseName": "艺术",
    "parentMenuId": 0,
    "menuStatus": true,
    "childMenu": [
    {
        "id": 29,
        "name": "painting",
        "chineseName": "绘画",
        "parentMenuId": 28,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 30,
        "name": "photography",
        "chineseName": "摄影",
        "parentMenuId": 28,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 31,
        "name": "music",
        "chineseName": "音乐",
        "parentMenuId": 28,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 32,
        "name": "architecture",
        "chineseName": "建筑",
        "parentMenuId": 28,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 33,
        "name": "design",
        "chineseName": "设计",
        "parentMenuId": 28,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 34,
        "name": "art_history",
        "chineseName": "艺术史",
        "parentMenuId": 28,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 35,
        "name": "movie",
        "chineseName": "电影",
        "parentMenuId": 28,
        "menuStatus": true,
        "childMenu": null
    }
    ]
},
{
    "id": 36,
    "name": "technology",
    "chineseName": "科技",
    "parentMenuId": 0,
    "menuStatus": true,
    "childMenu": [
    {
        "id": 37,
        "name": "internet",
        "chineseName": "互联网",
        "parentMenuId": 36,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 38,
        "name": "popular_science",
        "chineseName": "科普",
        "parentMenuId": 36,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 39,
        "name": "science",
        "chineseName": "科学",
        "parentMenuId": 36,
        "menuStatus": true,
        "childMenu": null
    },
    {
        "id": 40,
        "name": "program",
        "chineseName": "编程",
        "parentMenuId": 36,
        "menuStatus": true,
        "childMenu": null
    }
    ]
}
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327

使用嵌套 map 渲染到级联选择器上，

    bookTypeTree.push(...res.data.map(({ name, chineseName, childMenu }) =>({
          value: name,
          label: chineseName,
          children: childMenu.map(({ name, chineseName }) => ({
            value: name,
            label: chineseName
          }))
        }
    )))

1
2
3
4
5
6
7
8
9

name 对应 value，chineseName 对应 label，用户看到的值，然后对 childMenu 再 map 一一对应到 children 中。

结果：

# 二、新发现

lint-md (opens new window)，检查中文 Markdown 编写格式的工具。

使用方式:
```
# 校验当前目录下的 test.md 文件，并修复之
lint-md test.md --fix
```
1
2
markdown 排版工具 (opens new window)

我的编程周报就是用这个网站排版的。

# 三、参考资料

← 云胡的编程周报第 017 期云胡的编程周报第 003 期 →